<template>
	<view>

		<z-paging  ref="paging"   :default-page-size="params.pageSize" v-model="list" @query="getList">
			<template #top>
				<view class="search-box flex item-center">
					<image src="../../../static/svg/publicSvg/icon-search.svg" mode="heightFix" class="icon-search"></image>
					<input type="text" placeholder="搜索策划人昵称" v-model="params.businessShortName" class="search-inp">
				</view>
				<view class="sel-asc">
					<view class="flex item-center justify-between">
						<view class="asc-item flex item-center" @click="changeOrderBy(1)">
							<text class="asc-text" :class="{'active':params.sortField == 1}">分销金额</text>
							<view class="flex flex-col">
								<image class="icon-up"
									:src="params.sortType == 2 && params.sortField == 1?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
								<image class="icon-down"
									:src="params.sortType == 1 && params.sortField == 1?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
							</view>
						</view>
						<view class="asc-item flex item-center" @click="changeOrderBy(2)">
							<text class="asc-text" :class="{'active':params.sortField == 2}">分销佣金</text>
							<view class="flex flex-col">
								<image class="icon-up"
									:src="params.sortType == 2 && params.sortField == 2?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
								<image class="icon-down"
									:src="params.sortType == 1 && params.sortField == 2?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
							</view>
						</view>
						<view class="asc-item flex item-center" @click="changeOrderBy(3)">
							<text class="asc-text" :class="{'active':params.sortField == 3}">分销订单数</text>
							<view class="flex flex-col">
								<image class="icon-up"
									:src="params.sortType == 2 && params.sortField == 3?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
								<image class="icon-down"
									:src="params.sortType == 1 && params.sortField == 3?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view>
				<view v-for="agent in list" class="agent-box flex" :key="agent.id">
					<image :src="agent.logo" mode="" class="img-avatar"></image>
					<view class="agent-info flex flex-col justify-between">
						<view class="nick-name flex item-center justify-between">
							<view class=" flex item-center">
								{{agent.businessShortName}}
								<view class="group-name">{{agent.groupName}}</view>
								<!-- <image class="icon-list" src="@/center/static/role/vector.svg" mode="" @click="delAgentById(agent)"></image> -->
							</view>
							<view>
								¥{{agent.totalOrderAmt}}
							</view>
						</view>
						<view class="flex item-center justify-between">
							<view class="total-settle">补贴金额：<text class="red-price">¥{{agent.totalSubsidyAmt}}</text>
							</view>
							<view class="nick-name">{{agent.totalOrderCount}} 单</view>
						</view>
					</view>

				</view>
			</view>
		</z-paging>
		<!-- :style="{'height':h}" -->

		<!-- <view v-if="list.length == total" class="no-page-tit">没有更多了～</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		mathHeight
	} from '@/utils/index.js'
	import {
		pageMyBusiness
	} from '@/api/business.js'
	const h = ref(0)
	h.value = mathHeight(280)
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	const params = ref({
		sortField: '',
		sortType: 1,
		businessShortName: '',
		pageNum: 1,
		pageSize: 15
	})
	let paging = ref()
	const getList = async (num,size) => {
		// triggered.value = true
		params.value.pageNum = num
		uni.showLoading()
		let result = await pageMyBusiness({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
			// list.value = //params.value.pageNum == 1 ? result.list : (list.value).concat(result.list)
			// total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}

	watch(() => params.value.businessShortName, (val) => {
		reFresh()
	})
	const changeOrderBy = (i) => {
		if (i != params.value.sortField) {
			params.value.sortField = i
			params.value.sortType = 1
		} else {
			if (params.value.sortType == 2) {
				params.value.sortField = ''
			}
			params.value.sortType = params.value.sortType == 1 ? 2 : 1
		}
		reFresh()
	}


	// const emit = defineEmits(['updateNum','emitImg']);
	// const delAgentById =  (item) => {
	// 	uni.showModal({
	// 		content: '确认与该经纪人解除关系？',
	// 		confirmColor:'rgba(0, 174, 255, 1)',
	// 		cancelColor:'rgba(51, 51, 51, 0.6)',
	// 		success: async function  (res) {
	// 			if (res.confirm) {
	// 				// console.log('用户点击确定');
	// 				let result = await unBindAgent({id:item.id})
	// 				if(result){
	// 					uni.showToast({
	// 						title: '解绑成功',
	// 						icon: 'none'
	// 					})
	// 					reFresh()
	// 					emit('updateNum')
	// 				}
	// 			} else if (res.cancel) {
	// 				console.log('用户点击取消');
	// 				emit('updateNum')
	// 			}
	// 		}
	// 	});
	// }
	// const emitImg = (img) => {
	// 	emit('emitImg',{img:img,inviteData:inviteData.value})
	// }
	onMounted(() => {
		// getList()
		// openPer(null,0)
	})

</script>

<style lang="scss" scoped>
	.oper-box {
		margin: 20px;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 20px 0;

		.oper-item {
			width: 33.3%;
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			text-align: center;

			.oper-icon {
				// width: 24px;
				height: 24px;
				margin-bottom: 6px;
			}
		}
	}

	.search-box {
		margin: 20px;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0px 10px;
		height: 36px;

		.icon-search {
			height: 20px;
		}

		.search-inp {
			width: calc(100% - 40px);
			margin-left: 10px;
			font-size: 12px;
		}
	}

	.sel-asc {
		margin: 0 20px;
		padding: 10px 0;
		color: #999999;
		font-size: 14px;
		min-height: 40px;

		.asc-item {
			margin-right: 20px;

			.asc-text {
				margin-right: 4px;

				&.active {
					color: #FA4543;
				}
			}

		}

	}

	.icon-up {
		width: 8px;
		height: 8px;
	}

	.icon-down {
		width: 8px;
		height: 8px;
		transform: rotate(180deg)
	}

	.agent-box {
		padding: 8px 12px;
		margin: 0 20px 20px;
		background-color: #ffffff;
		border-radius: 8px;

		.agent-info {
			width: calc(100% - 60px);
			margin-left: 10px;
		}

		.img-avatar {
			width: 45px;
			height: 45px;
			border-radius: 8px;
		}

		.icon-list {
			width: 16px;
			height: 16px;
			margin-left: 4px;
		}

		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}

		.total-settle {
			font-size: 12px;
			font-weight: 400;
			// line-height: 17px;
			color: rgba(51, 51, 51, 0.6);
		}

		.red-price {
			color: rgba(250, 69, 67, 1);
		}
		.group-name{
			font-size: 12px;
			background-color: rgba(252, 181, 19, 1);
			padding: 0 4px;
			color: #ffffff;
			margin-left: 4px;
			border-radius: 4px;
		}
	}

	.no-page-tit {
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}
	// 邀请
	.invite-page {
		width: 343px;
		// height: 428px;
		border-radius: 12px;
		background-color: #ffffff;
		padding: 10px;

		.inv-logo {
			width: 88px;
			height: 88px;
			border-radius: 12px;
			margin-bottom: 8px;
		}

		.inv-name {
			color: rgba(51, 51, 51, 1);
			font-size: 16px;
			font-weight: 600;
			line-height: 24px;
		}

		.inv-title {
			font-size: 24px;
			font-weight: 600;
			line-height: 36px;
			margin-top: 20px;
		}

		.inv-tip {
			font-size: 14px;
			font-weight: 400;
			line-height: 21px;
			text-align: center;
			margin-top: 10px;
		}

		.app-logo {
			height: 95px;
			margin: 20px auto;
		}

		.icon-close {
			margin-bottom: 20px;
		}
		.long-tap-inv{
			// width: Hug (152px)
			height: 22px;
			padding: 0px 8px;
			border-radius: 4px;
			background: rgba(245, 245, 245, 1);
			color: rgba(51, 51, 51, 0.6);
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
			line-height: 22px;
			margin-bottom: 14px;
		}
	}
</style>
